<template>
  <view>
    <view style="position: relative;">
      <!-- <view :class="['navbar',isScroll === true ? 'nav-fixed':'nav-normal']" :style="{ 'height': navheight +parseInt(slotheight)+ 'px' ,'background-color' : bgcolor}">
				<view :style="{ 'height': navheight + 'px' ,'background-color' : bgcolor}">
					<view :style="{'height': statusBarHeight +'px'}"></view>
					<view class="header" @click="getTool" :style="{'height': menuHeight +'px'}">
						<view v-if="xiao" class="hai" :style="{'line-height': menuHeight +'px'}">
							海鲜冻品
						</view>
					</view>
				</view>

			</view>
      <image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/488ca0086209e335401bfbcc2e8ff224.png" class="bg" mode="widthFix"></image>-->
      <view class="shang_city">
        <view style="margin-top: 50rpx;background-color: #FFFFFF;box-sizing: border-box;padding: 30rpx 3% 0;border-radius: 16rpx;">
          <view v-for="(item,index) in one_list" :key="index">
            <!-- <view style="line-height: 100rpx;color: #000000;font-size: 36rpx;font-weight: 600;padding: 0 30rpx;">
							{{one_list.name || ''}}
            </view>-->
            <view v-if="item.is_only==1" style="overflow: hidden;" class="fl_box">
              <view style="font-size: 30rpx;line-height: 40rpx;">{{item.name}}</view>
              <view
                :class="a.check?'active':'a'"
                @click="handleTap(a.id,index,b)"
                style="width: 22%;float: left;text-align: center;line-height:50rpx;border-radius: 25rpx;"
                v-for="(a,b) in item.category_list"
                :key="b"
              >
                <!-- <image :src="a.main_image" style="width:60rpx;height: 60rpx;" mode=""></image> -->
                <text style="font-size: 24rpx;">{{a.name}}</text>
              </view>
            </view>
            <view v-if="item.is_only!=1" style="overflow: hidden;" class="fl_box">
              <view style="font-size: 30rpx;line-height: 40rpx;">{{item.name}}</view>
              <view
                :class="a.check?'active':'a'"
                @click="handleTap_duo(a.id,index,b)"
                style="width: 22%;float: left;text-align: center;line-height:50rpx;border-radius: 25rpx;"
                v-for="(a,b) in item.category_list"
                :key="b"
              >
                <!-- <image :src="a.main_image" style="width:60rpx;height: 60rpx;" mode=""></image> -->
                <text style="font-size: 24rpx;">{{a.name}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <button
        @click="queren"
        style="width: 92%;margin: 30rpx auto 180rpx;background-color: #1fb0ac;height: 90rpx;line-height: 90rpx;color: #FFFFFF;text-align: center;border-radius: 45rpx;font-size: 30rpx;"
        type="default"
      >确认</button>
    </view>

    <lb-picker ref="picker1" v-model="xueli" mode="selector" :dataset="{ name: xueli }" :list="listarr" @confirm="handleConfirm"></lb-picker>
    <lb-picker ref="picker2" v-model="xueli1" mode="selector" :dataset="{ name: xueli1 }" :list="listarr1" @confirm="handleConfirm1"></lb-picker>

    <uni-popup id="popup" ref="popup" :type="type_status" :animation="true">
      <view class style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
        <view style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">提示</view>
        <view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的用户信息</view>
        <view class="footer">
          <button @click="quxiao" style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;" type="default">取消</button>
          <button @click="login" lang="zh_CN" style="flex: 1;background-color: #000000;color: #FFFFFF;" open-type="getUserInfo">确定</button>
          <!-- <button @click="submitLink" type="default" class="submit">确认提交</button> -->
        </view>
      </view>
    </uni-popup>
    <uni-popup id="popup" ref="popup1" :type="type_status" :animation="true">
      <view class style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
        <view style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">提示</view>
        <view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的手机号</view>
        <view class="footer">
          <button @click="quxiao1" style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;" type="default">取消</button>
          <button @getphonenumber="login1" style="flex: 1;background-color: #000000;color: #FFFFFF;" open-type="getPhoneNumber">确定</button>
        </view>
      </view>
    </uni-popup>
    <noLoginToast ref="noLoginToast" />

    <!-- <mrhardTabbar></mrhardTabbar> -->
  </view>
</template>

<script>
import LbPicker from '@/components/lb-picker'
import mrhardTabbar from "../../components/mrhard-tabbar.vue";
export default {
  components: {
    mrhardTabbar,
    LbPicker
  },
  data() {
    return {
      scrollTop: 0,
      navheight: 0,
      statusBarHeight: 0,
      menuHeight: 0,
      haveBack: false,
      btnHeight: 30,
      btnWidth: 70,
      isScroll: true,
      slotheight: '0',

      xiao: true,
      one_list: {},
      twolist: [],
      xueli: '',
      listarr: [],
      xueli1: '',
      listarr1: [],
      threelist: [],
      one_id: '',
      two_id: '',
      type_status: 'center',
      status: '-1',
      type: '',
      voice_manage_id: ''
    }
  },
  onLoad(option) {
    this.type = option.type
    this.daid = option.daid
    this.voice_manage_id = option.fanwei_id
    this.one()
  },
  // onShow() {
  // 	if(this.daid){
  // 		this.post('api/voice/publish_category','',true).then(res=>{
  // 			console.log(res,123456)
  // 			if(res.code==1){
  // 				for(let i=0;i<res.data[0].list.length;i++){
  // 					if(this.daid==res.data[0].list[i].id){
  // 						console.log(i,1222222222)
  // 						this.status=i
  // 						return
  // 					}
  // 				}
  // 			}
  // 		})
  // 	}

  // },
  // onHide:function(){
  // 	console.log(1111)
  // 	uni.removeStorageSync('daid')
  // 	this.status='-1'
  // },
  methods: {
    queren: function () {
      let that = this
      let id_list = []
      let name_list = []
      let shuliang
      for (let i = 0; i < this.one_list.length; i++) {
        if (this.one_list[i].category_list.length > 1) {
          shuliang = 0
          for (let j = 0; j < this.one_list[i].category_list.length; j++) {
            if (this.one_list[i].category_list[j].check) {
              id_list.push(this.one_list[i].category_list[j].id)
              name_list.push(this.one_list[i].category_list[j].name)
              shuliang += 1
            }
          }
          if (shuliang < 1) {
            uni.showToast({
              title: '请选择' + that.one_list[i].name + '帖子分类',
              icon: "none",
              duration: 1000
            })
            return
          }
        } else {
          for (let j = 0; j < this.one_list[i].category_list.length; j++) {
            if (this.one_list[i].category_list[j].check) {
              id_list.push(this.one_list[i].category_list[j].id)
              name_list.push(this.one_list[i].category_list[j].name)
            }
          }
        }

      }
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];  //上一页页面实例
      //修改上一页data里面的searchVal参数值为1211
      prevPage.$vm.daid = id_list.join(',')
      prevPage.$vm.fenlei = name_list.join(',')
      prevPage.$vm.cishu = 1
      // prevPage.$vm.id_list=[]
      // prevPage.$vm.chanpin_list=[]
      // prevPage.$vm.zidingyi=[]
      // console.log(this.one_list.list[this.status].id,this.one_list.list[this.status].name)
      // return
      uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
        delta: 1
      });
    },
    getSysHeightInfo() {
      const that = this
      let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth

      statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      //#ifdef MP-WEIXIN
      menuButtonObject = uni.getMenuButtonBoundingClientRect()
      menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
      navheight = menuHeight + statusBarHeight
      btnHeight = menuButtonObject.height
      btnWidth = menuButtonObject.width
      //#endif
      //#ifdef H5
      menuHeight = 44
      navheight = menuHeight + statusBarHeight
      btnHeight = 30
      btnWidth = 70
      //#endif
      if (getCurrentPages().length === 1) { // 当只有一个页面时
        haveBack = false;
      } else {
        haveBack = true;
      }
      that.navheight = navheight
      that.statusBarHeight = statusBarHeight
      that.menuHeight = menuHeight
      that.haveBack = haveBack
    },

    // 一级
    one: function () {
      let daid_list
      if (this.daid.length > 1) {
        daid_list = this.daid.split(',')
      } else {
        daid_list = this.daid
      }

      this.post('api/voice/voice_category', { voice_manage_id: this.voice_manage_id }, true).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.one_list = res.data
          for (let i = 0; i < res.data.length; i++) {
            for (let j = 0; j < res.data[i].category_list.length; j++) {
              if (this.daid.length <= 1) {
                console.log(11111111111)
                if (daid_list == res.data[i].category_list[j].id) {
                  this.one_list[i].category_list[j].check = true
                }
              } else {
                console.log(222222222222)
                for (let m = 0; m < daid_list.length; m++) {
                  if (daid_list[m] == res.data[i].category_list[j].id) {
                    this.one_list[i].category_list[j].check = true
                  }
                }
              }
            }
          }
          // console.log(this.type)
          // console.log(res.data[this.type])
          // this.one_list=res.data[this.type]
        }
      })
    },
    async handleTap(id, index, b) {

      let isLogin = await this.$refs.noLoginToast.open()
      if (isLogin) {
        let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
        if (!isHasMobile) {
          return
        }
      } else {
        return
      }
      console.log(22222)
      console.log(this.one_list[index].category_list[b].check)
      for (let i = 0; i < this.one_list.length; i++) {
        if (index == i) {
          for (let j = 0; j < this.one_list[i].category_list.length; j++) {
            if (j == b) {
              this.one_list[i].category_list[j].check = !this.one_list[i].category_list[j].check
            } else {
              this.one_list[i].category_list[j].check = false
            }
          }
        }
      }
      this.$forceUpdate()


    },
    async handleTap_duo(id, index, b) {
      let isLogin = await this.$refs.noLoginToast.open()
      if (isLogin) {
        let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
        if (!isHasMobile) {
          return
        }
      } else {
        return
      }
      console.log(22222)
      console.log(this.one_list[index].category_list[b].check)
      for (let i = 0; i < this.one_list.length; i++) {
        if (index == i) {
          for (let j = 0; j < this.one_list[i].category_list.length; j++) {
            if (j == b) {
              this.one_list[i].category_list[j].check = !this.one_list[i].category_list[j].check
            }
          }
        }
      }
      this.$forceUpdate()
    },
    two: function (id) {
      this.post('api/voice/manage', { id: id }, true).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.twolist = res.data
          for (let i = 0; i < res.data.length; i++) {
            this.listarr.push(res.data[i].name)
          }
        }
      })
    },

    handleConfirm(e) {
      let that = this
      let index = e.index[0] || e.index
      console.log(index, 123456)
      this.two_id = this.twolist[index].id
      this.three(this.two_id)
      this.$refs['picker2'].show()
    },
    three: function (id) {
      this.threelist = []
      this.listarr1 = []
      console.log(id)
      let quan = [
        {
          name: '全部',
          id: ''
        }
      ]
      this.post('api/voice/manage', { id: id }, true).then(res => {
        console.log(res)
        if (res.code == 1) {

          this.threelist = quan.concat(res.data)
          for (let i = 0; i < this.threelist.length; i++) {
            this.listarr1.push(this.threelist[i].name)
          }
        }
      })
    },
    handleConfirm1(e) {
      let that = this
      let index = e.index[0] || e.index
      console.log(index)
      this.three_id = this.threelist[index].id
      console.log(this.one_id, this.two_id, this.three_id)
      let id = ''
      if (this.three_id == '') {
        id = this.two_id
      } else {
        id = this.three_id
      }
      if (this.status == '-1') {
        uni.showToast({
          title: '请选择帖子分类',
          icon: "none",
          duration: 1000
        })
        return
      } else {
        let daid = this.one_list[0].list[this.status].id
        uni.navigateTo({
          url: '/pages/index/fbtz?daid=' + daid + '&id=' + id
          // url:'../wenzhang/fbtz?daid='+daid+'&id='+id
        })
      }

    },
    // 发布帖子
    fbtz: function () {
      uni.navigateTo({
        url: '/pages/index/fbtz'
      })
    },
    quxiao1: function () {
      this.$refs.popup1.close()
    },
    login1: function (e) {
      console.log(e)
      let that = this
      this.$refs.popup1.close()
      uni.login({
        provider: 'weixin',
        success: (code) => {
          console.log(code)
          this.post('api/wechat/phone', {
            code: code.code,
            iv: e.detail.iv,
            encryptedData: e.detail.encryptedData
          }, true).then(res => {
            console.log(res, '123455')
            if (res.code == 1) {
              uni.setStorageSync('mobile', res.data.phoneNumber)
              uni.setStorageSync('mobile2', res.data.mobile2)
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 1000
              })
            }

          })

        }
      })
    },


  },
  mounted() {
    const that = this
    this.getSysHeightInfo()
    //#ifdef H5
    window.onscroll = function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 30) {
        that.isScroll = true
      } else {
        that.isScroll = false
      }
    }
    //#endif

  },
  onPageScroll(t) {

    t.scrollTop > 20 ? this.xiao = false : this.xiao = true;
    // t.scrollTop > 80 ? this.da = true : this.da = false;

  },
  watch: {
    scrollTop(newValue, oldValue) {
      //#ifdef MP-WEIXIN
      const that = this
      if (newValue > 1) {
        that.isScroll = true
      } else {
        that.isScroll = false
      }
      //#endif
    }
  }
}
</script>

<style lang="scss">
.fl_box > view {
  margin-left: 4%;
  margin-bottom: 30rpx;
}
.fl_box > view:nth-child(4n + 2) {
  margin-left: 0;
}
page {
  background-color: #f8f8f8 !important;
  font-family: Demibold;
}
.active {
  color: #ffffff;
  background-color: #1fb0ac;
}
.a {
  color: #000000;
  background-color: #eeeeee;
}
.bg {
  width: 100%;
}
.hai {
  text-align: center;
  font-size: 32rpx;
  color: #ffffff;
}
.sou {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  color: #ffffff;
  font-size: 26rpx;
  box-sizing: border-box;
  padding: 0 30rpx 0 80rpx;
  background-color: rgba(255, 255, 255, 0.3);
}

.suo {
  color: #ffffff;
  opacity: 1;
  font-size: 26rpx;
}

.souicon {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: 50%;
  left: 30rpx;
  transform: translateY(-50%);
}
.addcity {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 28rpx;
}
.shang_city {
  width: 92%;
  margin: 50rpx auto;
  // position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
  // box-sizing: border-box;
  // padding-bottom: 200rpx;
}
.lunbo {
  width: 92%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

// 头部
.navbar {
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 999;
  flex-shrink: 0;
  color: #fff;
  font-size: 16px;
}

.nav-normal {
  position: relative;
}

.nav-fixed {
  position: fixed;
}

.header {
  position: fixed;
  width: 100%;
}

.logo-centent {
  display: flex;
  align-items: center;
}

.logo-centent image {
  width: 260rpx;
  height: 68rpx;
  margin-left: 20rpx;
}

.hearder-status {
  display: flex;
  align-items: center;
  position: absolute;
  padding-left: 30rpx;
  height: 100%;
  z-index: 99999;
}

.header-title {
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  text-align: center;
}
.header-title image {
  position: absolute;
  width: 270rpx;
  height: 35rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-title-left {
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  text-align: left;
}

.back-text {
  margin-left: 7px;
  width: 100upx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.hearder-status .nav-title-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
  width: 100%;
  font-weight: bold;
}
.hearder-status .nav-btn {
  /* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
  width: 50%;
  font-weight: bold;
}

.hearder-status .nav-btn .gotback,
.hearder-status .nav-btn .gothome {
  flex: 1;
  text-align: center;
  font-size: 18px;
}
.Addslot {
  position: absolute;
  width: 100%;
}
.footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f4f4f4;
  margin-top: 30rpx;
  padding-bottom: 20rpx;

  button {
    margin: 0 auto;
    width: 100%;
    background-color: #19be6b;
    // width: 200upx;
    border-radius: 10upx;
    font-size: $uni-font-size-sm;
    // padding: 22upx 34upx;
    height: 80upx;
    font-size: 30rpx;
    line-height: 80upx !important;
    // line-height: 1;
    color: #ffffff;
  }

  button:after {
    border: 0;
  }
}
</style>

